<template>
  <view>
    <!-- 自定义导航栏 -->
    <view class="navBarBox">
      <!-- 状态栏占位 -->
      <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
      <!-- 真正的导航栏内容 -->
      <view class="navBar">
        <image class="logo" src="@/static/home/Bangaloer.svg" @click="backHome"></image>
        <!-- <view>我是导航栏标题</view> -->
      </view>
    </view>
    <!-- 页面内容 -->
    <!-- <view>我是页面内容</view> -->
  </view>
</template>

<script>
  export default {
    name: "HeadNav",
    data() {
      return {
        // 状态栏高度
        statusBarHeight: 0,
        // 导航栏高度
        navBarHeight: 82 + 11,
      };
    },
    props: {

    },
    methods: {
      backHome() {
        uni.switchTab({
          url: '/pages/home/home'
        });
      }
    },
    //第一次加载时调用
    created() {
      //获取手机状态栏高度
      this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
    },
  }
</script>

<style>
  .navBarBox {}

  .navBarBox .statusBar {}

  .navBarBox .navBar {
    padding: 3rpx 50rpx;
    padding-bottom: 8rpx;
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
  }

  .navBarBox .navBar .logo {
    width: 200rpx;
    height: 82rpx;
    /* margin-right: 10rpx; */
  }
</style>